import React,{Component} from 'react';
import style from './style.less';
import TopTime from './TopTime/index'
import {Button,Menu,Dropdown,Modal,Popconfirm } from 'antd'
import Planinformation from "../Drop-downmenu/Planinformation";
import Warning from "../WaringSearch/index";
import Operationlog from "../Drop-downmenu/Operationlog";
import * as actions from "../../store/action";
import { connect } from "react-redux";
import {Decoration7,Decoration11,Decoration6,Decoration5 } from '@jiaminghi/data-view-react'

import {
    MenuOutlined,
    LogoutOutlined,
    ExclamationCircleOutlined,
    QuestionCircleOutlined
  } from "@ant-design/icons";
import { Link, withRouter } from "react-router-dom";
  const { confirm } = Modal;

class Index extends Component {
    constructor(props) {
        super(props);
        this.state = {
          visible1: false, //告警信息查询
          visible2: false, //预案信息查询s
          visible3: false, //操作日志查询
          visible4: false, //修改密码
          visible5: false, //日志详情
          mapenlarge: true, //地图
          IconVisible: false, //小图标
          CircleVisible: false, //
          Wholepicture: false, //是否全图
          //看板
          Visable: false,
          windowHeight: 0
        };
      }
      componentDidMount() {
        this.setState({
          windowHeight: window.innerWidth/6.5
        })
       window.addEventListener("resize",this.changeWidth)
      }
      componentWillUnmount() {
        window.removeEventListener("resize",this.changeWidth);
      }
      changeWidth = (e) => {
          const screenWidth = e.target.innerWidth;
          if (screenWidth <= 768) {
              this.setState({
                  windowHeight: screenWidth/6.5
              })
          } else if (screenWidth >= 1300) {
              this.setState({
                  windowHeight:  screenWidth/6.5
              })
          } else if (768 < screenWidth < 1300) {
              this.setState({
                  windowHeight:  screenWidth/6.5
              })
          }
      }
     handleDelHousing = () => {
       
      this.props.logout();
      this.props.history.push({pathname:'/login'})
            
    }
    render(){
       const deleteConfirm = (
      <div style={{ width: "100%", height: "100%" }}>
        <div>
          <div style={{ display: "grid", gridTemplateColumns: "15% 15%" }}>
            <div>
              <ExclamationCircleOutlined
                style={{
                  fontSize: "30px",
                  marginLeft: "5px",
                  color: "rgb(245, 190, 9)",
                }}
              />
            </div>
            <div style={{ marginTop: "5px", fontSize: "20px", color: "white" }}>
              确认
            </div>
          </div>
          <p style={{ marginTop: "10px", marginLeft: "3vw", color: "white" }}>
            {" "}
            是否确定退出
          </p>
        </div>
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "20% 20%",
            justifyContent: "end",
            gridColumnGap: "5px",
          }}
        >
          <Link to="/login">
            <Button
              style={{
                backgroundColor: "rgb(2, 2, 44)",
                color: "rgb(71, 221, 34)",
                border: "1px solid rgb(71, 221, 34)",
              }}
              onClick={() => {
                this.props.logout();
              }}
            >
              确定
            </Button>
          </Link>
          <Button
            style={{
              backgroundColor: "rgb(2, 2, 44)",
              color: "rgb(238, 50, 17)",
              border: "1px solid rgb(238, 50, 17)",
            }}
            onClick={() => {
              this.setState({ Visable: false });
            }}
          >
            取消
          </Button>
        </div>
      </div>
    );
        return(
            <div className={style.div_body}>
                <div className={style.div_body_left}>
                    <TopTime/>
                </div>
                <div className={style.div_body_middle}>
                    <h1  style={{fontSize:`calc(${this.state.windowHeight}%)`}}>输油管道穿跨越异常事件视频智能分析系统</h1>  
                </div>
                <div className={style.div_body_right}>
                   <div className={style.div_body_right1}>
                        <div className={style.div_button}>
                            <Dropdown overlay={this.props.menu}>
                                <Button type="primary" style={{ width: "60px" }} ghost={true}>
                                <MenuOutlined />
                                </Button>
                            </Dropdown>
                            </div>
                            <div className={style.div_out}>
                              <Button
                                type="primary"
                                style={{ width: "60px" }}
                                ghost={true}
                                onClick={() => {
                                  this.setState({ Visable: true });
                                }}
                              >
                                <LogoutOutlined />
                              </Button>
                        </div>
                   </div>
                </div>
                <Modal
                  centered
                  visible={this.state.Visable}
                  onCancel={() => this.setState({ Visable: false })}
                  closable={false}
                  footer={null}
                  width={400}
                  bodyStyle={{ backgroundColor: "rgb(2, 2, 44)"}}
                  style={{width:"40vw",height:"20vh",marginBottom:"30%"}}
                >
                  {deleteConfirm}
                </Modal>
            </div>
        )
    }
}
const mapDispatchToProps = (dispatch) => ({
   
    logout() {
      dispatch(actions.logoutRequest());
    },
  });
  export default connect(null, mapDispatchToProps)(withRouter(Index));
  